<!DOCTYPE html>
<title> Removing Wheel Target in Event Handler </title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>

<style>
div {
  margin: 0px;
  padding: 0px;
}
#outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
}
#inner {
  width: 1000px;
  height: 1000px;
}
</style>

<div id="outer">
  <div id="inner">
  </div>
</div>

<script>
  let outer = document.getElementById("outer");

  function detachWheelTarget(e) {
    e.preventDefault();
    outer.parentNode.removeChild(outer);
  }

  outer.addEventListener("wheel", detachWheelTarget);

  promise_test(async(t) => {
    let bounds = outer.getBoundingClientRect();
    let x = bounds.x + 100, y = bounds.y + 100;
    await mouseMoveTo(x, y);
    await smoothScroll(40, x, y, GestureSourceType.MOUSE_INPUT, 'downright', SPEED_INSTANT);
    await new Promise( (resolve) => {
      t.step_timeout(resolve, 10);
    });
  }, "Test verify that detaching a wheel target during handling the event" +
     "will not crash the renderer.");
</script>
